<template>
  <div class="goods-box" :class="{'editor-ad-active':data.active}"@click="exposetop($event,data.selfindex)">
    <!-- 四中情况  type-->
    <!-- 大图 -->
    <div class="goods-big" v-if="data.type==1" v-for="item in data.datalist">
      <div class="goods-big-img">
        <img :src="item.pic" alt>
      </div>
      <div class="goods-big-title" v-if="data.showtitle">{{item.title}}</div>
      <div class="goods-big-intro" v-if="data.showintro">{{item.intro}}</div>
      <div class="goods-big-price" v-if="data.showprice">¥{{item.price}}</div>
    </div>
    <!-- 小图 -->
    <div class="goods-sm" v-if="data.type==2" v-for="item in data.datalist">
      <div class="goods-sm-img">
        <img :src="item.pic" alt>
      </div>
      <div class="goods-sm-title" v-if="data.showtitle">{{item.title}}</div>
      <div class="goods-sm-price" v-if="data.showprice">¥{{item.price}}</div>
    </div>
    <!-- 详细列表 -->
    <div class="goods-list" v-if="data.type==3" v-for="item in data.datalist">
      <div class="goods-list-img">
        <img :src="item.pic" alt>
      </div>
      <div class="goods-list-right">
        <div class="goods-list-title" v-if="data.showtitle">{{item.title}}</div>
        <div class="goods-big-intro" v-if="data.showintro">{{item.intro}}</div>
        <div class="goods-list-price" v-if="data.showprice">¥{{item.price}}</div>
      </div>
    </div>
      <the-asscon :active="data.active" @control="control"/>
  </div>
</template>

<script>
import TheAsscon from "@/components/assCon"
export default {
   props:{
    data:{
      type:Object
    }
  },
  name: "HelloWorld",
  data() {
    return {
     
    };
  },
   methods:{
    control(e){
      //1向上 2向下 3删除
      if(e==3){
    var data ={
          type:e,
          index:this.data.selfindex
      }
        this.$emit("on-contro",data)
      }
    
    },
    exposetop(e,selfindex){
        this.$emit("queryTop",  {
         offsetTop:e.currentTarget.offsetTop,
         selfindex:selfindex
      })
    }
  },
    components:{
     TheAsscon,
    }
};
</script>


